<template>
	<a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true"
		@close="handleCancel" :visible="visible" style="height: 100%;overflow: auto;padding-bottom: 53px;">
		<a-spin :spinning="confirmLoading">
			<a-form-model ref="form" :model="model" :rules="validatorRules">
				<div style='font-weight: bold;font-size: 20px;margin-left: 20px'>基本信息</div>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName" label="个人照片">
					<a-avatar :size="64"
						:src="model.formalPhotos || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'"
						@click="openImg(model.formalPhotos)" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName" label="姓名">
					<a-input disabled placeholder="请输入姓名" v-model="model.userName" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phoneNum" label="电话">
					<a-input disabled placeholder="请输入电话" v-model="model.phoneNum" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="grade" label="月嫂等级">
					<a-input disabled placeholder="月嫂等级" v-model="gradeList[model.grade]" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身高(厘米)">
					<a-input  placeholder="身高(厘米)" v-model="model.height" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="体重(千克)">
					<a-input  placeholder="体重(千克)" v-model="model.weight" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="birthday" label="出生日期">
					<a-date-picker v-model="model.birthday" @change="changeBirthday" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="age" label="年龄">
					<a-input-number disabled v-model="model.age" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="民族">
					<a-input  placeholder="民族" v-model="model.nation" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol" label="籍贯">
					<!-- <a-input  placeholder="籍贯" v-model="model.nativePlaceName" /> -->
					<a-cascader v-model="model.nativePlaceArr" :options="options" placeholder="籍贯" @change="onChange" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="哪年开始做月嫂">
					<a-input  placeholder="哪年开始做月嫂" v-model="model.joinWorkDate" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="学历">
					<span
						v-if="model.education && educationList[model.education]">{{educationList[model.education].name}}</span>
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="婚姻状况">
					<span
						v-if="model.maritalStatus && maritalStatusList[model.maritalStatus]">{{maritalStatusList[model.maritalStatus].name}}</span>
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="伴侣状况">
					{{model.spouseWorkType}}
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="生育情况">
					<span
						v-if="model.childrenEdu && spouseWorkTypeList[model.childrenEdu]">{{spouseWorkTypeList[model.childrenEdu].name}}</span>
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="子女情况">
					<span
						v-if="model.childrenNums && childEdList[model.childrenNums]">{{childEdList[model.childrenNums].name}}</span>
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="speciality" label="性格特长">
					<a-input placeholder="性格特长" v-model="model.speciality" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nurseMotto" label="护理格言">
					<a-input placeholder="护理格言" v-model="model.nurseMotto" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="skillTags" label="能力标签">
					<a-input placeholder="能力标签" v-model="model.skillTags" />
				</a-form-model-item>
				<div style='font-weight: bold;font-size: 20px;margin-left: 20px'>认证信息</div>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="physicalScore" label="证书技能">
					<imageUpload :fileList="model.careerCredentialsList" :uploadId="7" :number="number"
						@change="changeUpload" :text="'证书技能'" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="锦旗">
					<imageUpload :fileList="model.pennantList" :uploadId="6" :number="number" @change="changeUpload"
						:text="'锦旗'" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="荣誉">
					<imageUpload :fileList="model.honorList" :uploadId="5" :number="number" @change="changeUpload"
						:text="'荣誉'" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="护理宝宝案例">
					<imageUpload :fileList="model.physicalResultList" :uploadId="4" :number="number"
						@change="changeUpload" :text="'护理宝宝案例'" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="月子餐精选">
					<imageUpload :fileList="model.productRecommendList" :uploadId="3" :number="number"
						@change="changeUpload" :text="'月子餐精选'" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份信息正面">
					<imageUpload :fileList="model.idCardFrontList" :uploadId="1" @change="changeUpload"
						:text="'身份信息正面'" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份信息反面">
					<imageUpload :fileList="model.idCardBackList" :uploadId="2" @change="changeUpload"
						:text="'身份信息反面'" />
				</a-form-model-item>
				<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="体检报告">
					<imageUpload :fileList="model.healthCheckList" :uploadId="8" :number="number" @change="changeUpload"
						:text="'体检报告'" />
				</a-form-model-item>

				<div v-if="bankInfo" style='font-weight: bold;font-size: 20px;margin-left: 20px'>银行卡
					<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="银行开户姓名">
						{{bankInfo.userName}}
					</a-form-model-item>
					<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="银行名称">
						{{bankInfo.bankName}}
					</a-form-model-item>
					<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开户支行">
						{{bankInfo.branchBankName}}
					</a-form-model-item>
					<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="银行账户">
						{{bankInfo.bankAccount}}
					</a-form-model-item>
					<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预留电话">
						{{bankInfo.phoneNum}}
					</a-form-model-item>
				</div>
				<div v-if="nannyBusyList && nannyBusyList.length > 0"
					style='font-weight: bold;font-size: 20px;margin-left: 20px'>繁忙时间段
					<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="繁忙开始时间">
						{{nannyBusyList[0].busyBegin || '无'}}
					</a-form-model-item>
					<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="繁忙结束时间">
						{{nannyBusyList[0].busyEnd || '无'}}
					</a-form-model-item>
				</div>
			</a-form-model>
		</a-spin>
		<div
		        :style="{
		          position: 'absolute',
		          right: 0,
		          bottom: 0,
		          width: '100%',
		          borderTop: '1px solid #e9e9e9',
		          padding: '10px 16px',
		          background: '#fff',
		          textAlign: 'right',
		          zIndex: 1,
		        }"
		      >
		        <a-button :style="{ marginRight: '8px' }" @click="handleCancel">
		          关闭
		        </a-button>
		        <a-button type="primary" @click="handleOk">
		          确定
		        </a-button>
		      </div>
	</a-drawer>
</template>

<script>
	import {
		httpAction
	} from '@/api/manage'
	import moment from "moment"
	import {
		getAction
	} from '../../../api/manage'
	import imageUpload from './baseInfoImageUpload'
	import { addressList } from './cityData.js'
	export default {
		name: "WechatNannyBaseinfoModal",
		components: {
			imageUpload
		},
		data() {
			return {
				number: 20,
				bankInfo: {},
				nannyBusyList: [],
				title: "详情",
				visible: false,
				modalWidth: 800,
				drawerWidth: 700,
				modaltoggleFlag: true,
				confirmDirty: false,
				gradeList: ['高级', '金牌', '钻石', '明星', '首席'],
				model: {
					idCardFrontList: [],
					idCardBackList: [],
					productRecommendList: [],
					careerCredentialsList: [],
					healthCheckList: [],
					pennantList: [],
					physicalResultList: [],
					productRecommendList: [],
					education: '',
					maritalStatus: '',
					childrenNums: ''
				},
				// 学历 0文盲 1初中 2高中 3中专 4大专 5本科
				educationList: [{
						id: 0,
						name: '文盲',
					},
					{
						id: 1,
						name: '初中',
					},
					{
						id: 2,
						name: '高中',
					}, {
						id: 3,
						name: '中专',
					},
					{
						id: 4,
						name: '大专',
					},
					{
						id: 5,
						name: '本科',
					},
				],
				// 婚姻状况 0 未婚 1 已婚未育 2已婚已育
				maritalStatusList: [{
					id: 0,
					name: '未婚'
				}, {
					id: 1,
					name: '已婚未育'
				}, {
					id: 2,
					name: '已婚已育'
				}],
				spouseWorkTypeList: [{
						id:0,
						name:'无'
					},{
						id:1,
						name:'一男孩'
					},{
						id:2,
						name:'一女孩'
					},{
						id:3,
						name:'一男一女'
					},{
						id:4,
						name:'两男孩一女孩'
					},{
						id:5,
						name:'两女孩一男孩'
					}, {
							id: 6,
							name: '两男孩'
						}, {
					id: 7,
					name: '两女孩'
				}],
				childEdList: [{
					id: 0,
					name: '学前'
				}, {
					id: 1,
					name: '小学'
				}, {
					id: 2,
					name: '中学'
				}, {
					id: 3,
					name: '大学'
				}, {
					id: 4,
					name: '工作'
				}],
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					},
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					},
				},

				confirmLoading: false,
				validatorRules: {},
				url: {
					add: "/wechat/wechatNannyBaseinfo/add",
					edit: "/wechat/wechatNannyBaseinfo/editResume",
					getInfo: "wechat/wechatNannyBaseinfo/getInfo"
				},
				nannyApply: {},
				nannyInfo: {},
				options: []
			}
		},
		created() {
			function handleData(arr) {
				arr.forEach(item => {
					item.value = item.label
					if(item.children) {
						handleData(item.children)
					}
				})
			}
			handleData(addressList)
			this.options = addressList 
		},
		methods: {
			onChange(value, selectedOptions) {
				this.model.nativePlaceName = value.join('')
				this.model.nativePlace = selectedOptions[1].code+'00'
			},
			changeBirthday() {
				this.model.age = this.calculateDate(this.model.birthday)
			},
			calculateDate(birthDate) {
			  const currentDate = new Date();
			  const diffTime = Math.abs(currentDate - new Date(birthDate));
			  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
			  const age = Math.floor(diffDays / 365);
			  return age;
			},
			changeUpload(data, uploadId) {
				if (uploadId == 1) {
					this.model.idCardFrontList = data
					this.model.idCardFront = data[0].url
				} else if (uploadId == 2) {
					this.model.idCardBackList = data
					this.model.idCardBack = data[0].url
				} else if (uploadId == 3) {
					this.model.productRecommendList = data
					let arr = []
					data.forEach(item => {
						arr.push(item.url)
					})
					this.nannyApply.productRecommend = arr.join(',')
				} else if (uploadId == 4) {
					this.model.physicalResultList = data
					let arr = []
					data.forEach(item => {
						arr.push(item.url)
					})
					this.nannyApply.physicalResult = arr.join(',')
				} else if (uploadId == 5) {
					this.model.honorList = data
					let arr = []
					data.forEach(item => {
						arr.push(item.url)
					})
					this.model.honor = arr.join(',')
				} else if (uploadId == 6) {
					this.model.pennantList = data
					let arr = []
					data.forEach(item => {
						arr.push(item.url)
					})
					this.model.pennant = arr.join(',')
				} else if (uploadId == 7) {
					this.model.careerCredentialsList = data
					let arr = []
					console.log(data)
					data.forEach(item => {
						arr.push(item.url)
					})
					this.model.careerCredentials = arr.join(',')
				} else if (uploadId == 8) {
					this.model.healthCheckList = data
					let arr = []
					data.forEach(item => {
						arr.push(item.url)
					})
					this.model.healthCheck = arr.join(',')
				}
			},
			openImg(previewImage) {
				this.previewVisible = true
				this.previewImage = previewImage
			},
			add() {
				//初始化默认值
				this.edit({});
			},
			edit(record) {
				//this.model = Object.assign({}, record);
				this.visible = true;
				//获取详情
				getAction(this.url.getInfo, {
					"userId": record.userId
				}).then((res) => {
					if (res.success) {
						let baseinfo = res.result.nannyBaseinfo
						let careerCredential = baseinfo.careerCredentials ? baseinfo.careerCredentials.split(
							',') : []
						baseinfo.careerCredentialsList = careerCredential.map((item, index) => {
							return {
								uid: index,
								name: 'image.png',
								status: 'done',
								url: item
							}
						})
						baseinfo.careerCredentialsList = baseinfo.careerCredentialsList || []
						// 获得锦旗
						const pennant = baseinfo.pennant ? baseinfo.pennant.split(',') : []
						baseinfo.pennantList = pennant.map((item, index) => {
							return {
								uid: index,
								name: 'image.png',
								status: 'done',
								url: item
							}
						})
						baseinfo.pennantList = baseinfo.pennantList || []
						// 获得荣誉
						const honor = baseinfo.honor ? baseinfo.honor.split(',') : []
						baseinfo.honorList = honor.map((item, index) => {
							return {
								uid: index,
								name: 'image.png',
								status: 'done',
								url: item
							}
						})
						baseinfo.honorList = baseinfo.honorList || []
						// 体检
						const healthCheck = baseinfo.healthCheck ? baseinfo.healthCheck.split(',') : []
						baseinfo.healthCheckList = healthCheck.map((item, index) => {
							return {
								uid: index,
								name: 'image.png',
								status: 'done',
								url: item
							}
						})
						baseinfo.healthCheckList = baseinfo.healthCheckList || []
						// 身份信息
						baseinfo.idCardBackList = []
						baseinfo.idCardFrontList = []
						baseinfo.idCardBack && baseinfo.idCardBackList.push({
							uid: '-1',
							name: 'image.png',
							status: 'done',
							url: baseinfo.idCardBack,
						})
						baseinfo.idCardFront && baseinfo.idCardFrontList.push({
							uid: '-1',
							name: 'image.png',
							status: 'done',
							url: baseinfo.idCardFront
						})
						let nannyApply = res.result.nannyApply
						// 服务案例
						const physicalResult = nannyApply && nannyApply.physicalResult ? nannyApply.physicalResult
							.split(',') : []
						baseinfo.physicalResultList = physicalResult.map((item, index) => {
							return {
								uid: index,
								name: 'image.png',
								status: 'done',
								url: item
							}
						})
						// 月子餐
						let recommend = nannyApply && nannyApply.productRecommend ? nannyApply.productRecommend
							.split(',') : []
						baseinfo.productRecommendList = recommend.map((item, index) => {
							return {
								uid: index,
								name: 'image.png',
								status: 'done',
								url: item
							}
						})
						baseinfo.productRecommendList = baseinfo.productRecommendList || []
						baseinfo.physicalResultList = baseinfo.physicalResultList || []
						if(baseinfo.birthday) {
							baseinfo.age = this.calculateDate(baseinfo.birthday)
						}
						let options = this.options
						let nativePlaceArr = []
						function handleOptions(options){
							options.forEach(item => {
								if(item.code+'00' == baseinfo.nativePlace) {
									let dataName = baseinfo.nativePlaceName.replace(item.label,'')
									nativePlaceArr = [dataName,item.label]
								}
								if(item.children) {
									handleOptions(item.children)
								}
							})
						}
						handleOptions(options)
						baseinfo.nativePlaceArr = nativePlaceArr || []
						this.model = baseinfo
						this.nannyApply = nannyApply || {}
						this.nannyBusyList = res.result.nannyBusyList
						this.bankInfo = res.result.bankInfo
					}

				});
			},
			close() {
				this.$emit('close');
				this.visible = false;
				this.$refs.form.clearValidate();
			},
			handleOk() {
				const that = this;
				// 触发表单验证
				this.$refs.form.validate(valid => {
					if (valid) {
						that.confirmLoading = true;
						let httpurl = '';
						let method = '';
						if (!this.model.id) {
							httpurl += this.url.add;
							method = 'post';
						} else {
							httpurl += this.url.edit;
							method = 'post';
						}
						let params = {
							nannyApply: this.nannyApply,
							nannyBaseinfo: this.model,
							nannyBusyList: this.nannyBusyList
						}
						httpAction(httpurl, params, method).then((res) => {
							if (res.success) {
								that.$message.success(res.message);
								that.$emit('ok');
							} else {
								that.$message.warning(res.message);
							}
						}).finally(() => {
							that.confirmLoading = false;
							that.close();
						})
					} else {
						return false;
					}
				})
			},
			handleCancel() {
				this.close()
			}

		}
	}
</script>

<style lang="less" scoped>

</style>